<!-- 装备画像 详情 -->
<template>
  <a-row class="detail" :gutter="20">
    <a-col :span="24">
      <span class="detail-title">关系图</span>
      <IconClose class="detail-icon" @click="() => onGoBack()" />
      <div class="main">
        <RelationChart
          ref="relationChart"
          @funRefreshNodes="funDataList"
          @funDelNodes="funDelNodes"
          @funNodesInfo="funNodesInfo"
        ></RelationChart>
      </div>
    </a-col>
  </a-row>
</template>
<script setup>
import { ref, defineEmits, onMounted, defineExpose, nextTick } from 'vue'
import { Message } from '@arco-design/web-vue'
import RelationChart from '@/components/chart/relationChart/index.vue'
import { IconClose } from '@arco-design/web-vue/es/icon'
import { apiHome } from '@/api/healthAssessment'
const relationChart = ref(null)
// 获取图表数据
const funDataList = (id, type) => {
  apiHome
    .getPortraitDetail(id)
    .then((res) => {
      if (res.code === 200) {
        res.data.edgesArray.forEach((el) => {
          el.from = el.satelliteFrom
          el.to = el.satelliteTo
        })
        if (type === 1) {
          nextTick(() => {
            relationChart.value.initDiagram(res.data.nodesArray, res.data.edgesArray)
          })
        } else {
          nextTick(() => {
            relationChart.value.funUpdateNode(res.data)
          })
        }
      }
    })
    .catch(() => {})
}
// 关系图 删除节点
const funDelNodes = (id) => {
  apiHome
    .getPortraitDel(id)
    .then((res) => {
      nextTick(() => {
        relationChart.value.funDelUpdateNode(res)
      })
    })
    .catch(() => {
      Message.error('删除失败，请稍后重试！')
    })
}
// 节点信息详情
const funNodesInfo = (id) => {
  nextTick(() => {
    relationChart.value.funNodesInfoShow(id.value, '', 0)
  })
}
const emit = defineEmits(['onGoBack'])
// 返回
const onGoBack = () => {
  emit('onGoBack')
}
defineExpose({
  funDataList
})
onMounted(() => {})
</script>
<style lang="less" scoped>
.detail {
  height: 100%;
  .arco-col {
    height: 100%;
    position: relative;
    .detail-icon {
      position: absolute;
      top: 10px;
      right: 28px;
      font-size: 28px;
      cursor: pointer;
      z-index: 999;
    }
    .detail-title {
      position: absolute;
      left: 20px;
      top: 10px;
      font-size: 14px;
      color: #ffffff;
      background: #3075ac;
      border: 1px solid #3075ac;
      padding: 5px 8px;
    }
    .main {
      width: 100%;
      height: 100%;
      background: url('@/assets/image/left-aside-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
